<template>
  <div>
    <input
      type="file"
      id="inputPic"
      class="icon-font icon-ai-up-img"
      accept="image/png, image/gif, image/jpeg"
      @change="update($event)"
      style="display:none;"
    />
    <vue-ueditor-wrap
      id="editor"
      v-model="msg"
      :config="editorConfig"
      @beforeInit="addCustomizeButton()"
    ></vue-ueditor-wrap>
  </div>
</template>
<script>
import {
  uploads,
  inquireId
} from '@/api/contact.js'
import axios from "axios";
export default {
  props: ["navigationId", "caption"],
  data() {
    return {
      msg: "",
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 340,
        // 初始容器宽度
        initialFrameWidth: '600',
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL: "/UEditor/",
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: "//ueditor.szcloudplus.com/cos",
      },


    }
  },
  watch: {

    msg(value) {
      this.$emit("onProduDesc", value, { passive: false })
    }

  },
  methods: {
    drawLine() {
      // console.log(this.ueditortext);
    },
    addCustomizeButton(editorId) {
      UE.registerUI('test-button', function (editor, uiName) {
        //注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            // alert('execCommand:' + uiName)
            // editor.execCommand('inserthtml', `<span> 111</span>`)
          }
        });
        //创建一个button
        var btn = new UE.ui.Button({
          //按钮的名字
          name: uiName,
          //提示
          title: "上传图片",
          //添加额外样式，指定icon图标，这里默认使用一个重复的icon
          cssRules:
            "background-position: -726px -77px;",
          //点击时执行的命令
          onclick: function () {
            // 点击新图标时，触发到点击input按钮的事件
            editor.execCommand(uiName);
            document.getElementById('inputPic').click()
          }
        });
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener("selectionchange", function () {

        })


        // 因为你是添加 button，所以需要返回这个 button
        return btn
      },
        // 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
    },
    // 上传图片
    update(e) {
      let file = e.target.files[0];
      var param = new FormData()  // 创建form对象
      param.append('files', file)
      param.append('mediaType', 1)
      param.append("categoryName", "导航栏")    // 通过append向form对象添加数据
      param.append("tagNames", this.caption)
      uploads(param).then(res => {
        if (res.data.code === "10000") {
          let arrayImg = res.data.data
          arrayImg.map((item, index) => {
            this.imageUrl = item.url;


            this.msg = `<img src=${this.imageUrl}>` + this.msg;

            this.$message.success("图片地址获取成功")

          })
        } else {
          this.$message.error("网络请求失败")
        }



      })
    },
    // 根据id 查询
    getUEditor() {
      inquireId({ menuId: this.navigationId }).then(res => {
        if (res.data.msg == "success") {
          let fd = res.data.data.pcUrl
          // 请求富文本框的值
          axios.get(fd).then(res => {
            // console.log(res);
            this.msg = res.data.content
            // console.log(this.msg);
          })
        }

      })


      // this.msg = this.ueditortxt

      // console.log(this.ueditortxt);



    },

    // 富文本框值为空
    delectUeditor() {
      this.msg = ""
    }
  },
}
</script>
<style scoped>
* {
  touch-action: pan-y;
}
</style>
